<template>
	<Transition name="slide-up">
		<div v-if="visible" class="update-drawer-overlay" @click="onOverlayClick">
			<div class="update-drawer" @click.stop>
				<!-- 拖动指示器 -->
				<div class="drawer-handle">
					<span class="handle-bar" />
				</div>

				<div class="update-content">
					<!-- 图标 -->
					<div class="update-icon">
						<div class="icon-circle">
							<ElIcon :size="40">
								<Refresh />
							</ElIcon>
						</div>
					</div>

					<!-- 标题 -->
					<h2 class="update-title">发现新版本</h2>

					<!-- 版本信息 -->
					<div class="version-info">
						<div class="version-badge">
							<span class="label">当前版本</span>
							<span class="value">{{ currentVersion }}</span>
						</div>
						<div class="version-arrow">
							<ElIcon>
								<Right />
							</ElIcon>
						</div>
						<div class="version-badge new">
							<span class="label">最新版本</span>
							<span class="value">{{ newVersion }}</span>
						</div>
					</div>

					<!-- 更新内容 -->
					<div class="update-details">
						<h3>更新内容</h3>
						<ul class="update-list">
							<li v-for="(item, index) in updateContent" :key="index">
								<ElIcon class="check-icon">
									<Check />
								</ElIcon>
								<span>{{ item }}</span>
							</li>
						</ul>
					</div>

					<!-- 进度条（更新中显示） -->
					<div v-if="isUpdating" class="update-progress">
						<ElProgress :percentage="progress" :stroke-width="6" :show-text="false" />
						<p class="progress-text">正在更新... {{ progress }}%</p>
					</div>

					<!-- 操作按钮 -->
					<div class="update-actions">
						<ElButton
							v-if="!isUpdating"
							size="large"
							class="btn-later"
							@click="handleLater">
							稍后提醒
						</ElButton>
						<ElButton
							v-if="!isUpdating"
							type="primary"
							size="large"
							class="btn-update"
							@click="handleUpdate">
							立即更新
						</ElButton>
						<ElButton
							v-if="isUpdating"
							type="primary"
							size="large"
							disabled
							class="btn-updating">
							更新中...
						</ElButton>
					</div>
				</div>
			</div>
		</div>
	</Transition>
</template>

<script setup lang="ts">
import { Refresh, Right, Check } from "@element-plus/icons-vue";

interface Props {
	modelValue?: boolean;
	currentVersion?: string;
	newVersion?: string;
	updateContent?: string[];
}

const props = withDefaults(defineProps<Props>(), {
	modelValue: false,
	currentVersion: "1.0.0",
	newVersion: "1.1.0",
	updateContent: () => [
		"优化了系统性能，运行更流畅",
		"修复了已知问题，提升稳定性",
		"新增了多项实用功能",
		"改进了用户界面体验",
	],
});

const emit = defineEmits<{
	"update:modelValue": [value: boolean];
	update: [];
	later: [];
}>();

const visible = computed({
	get: () => props.modelValue,
	set: val => emit("update:modelValue", val),
});

const isUpdating = ref(false);
const progress = ref(0);

// 处理遮罩点击
const onOverlayClick = () => {
	if (!isUpdating.value) {
		visible.value = false;
	}
};

// 处理立即更新
const handleUpdate = () => {
	isUpdating.value = true;
	progress.value = 0;

	emit("update");
	isUpdating.value = false;
	visible.value = false;
};

// 处理稍后提醒
const handleLater = () => {
	emit("later");
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
